<template>
    <div class="orderList">
        <h1>查看订单</h1>
        <el-table
      :data="tableData"
      style="width: 80%;margin:auto;">
      <el-table-column
        prop="id"
        label="订单号"
        width="auto">
      </el-table-column>
      <el-table-column
        prop="student_id"
        label="学号"
        width="auto">
      </el-table-column>
      <el-table-column
        prop="room_id"
        label="房间号">
    <template slot="header">
        <span style="margin:5px">房间号</span>
        <el-tooltip class="item" effect="dark" content="点击房间号查看房间详情" placement="right">
            <el-icon class="el-icon-info"></el-icon>
        </el-tooltip>
        
    </template>
     <template slot-scope="scope">
      

      <el-button  type="text"  @click="showRoomDetail(scope.row)">{{scope.row.room_id}}</el-button>
 
    
 
    
     </template>
      
      </el-table-column>
      <el-table-column
        prop="bed_number"
        label="床位"
        width="auto">
      </el-table-column>
    </el-table>

    <RoomDetail :visible.sync="popupVisible" :captcha-visible="false" :room="this.chosenRoom"  @close="closePopup" />

    </div>

  </template>

  <script>
import  {getOrderByUID} from '@/api/order.js'
import  {getRoomByRoomID} from '@/api/room.js'
import RoomDetail from '@/views/RoomDetail.vue'
    export default {
        components:{
            RoomDetail
        },
      data() {
        return {
          tableData: [],
          popupVisible: false,
       
         chosenRoom:{},
          
        }},
        mounted(){
            this.do_getOrderByUID();
        },
        methods:{
            do_getOrderByUID(){
                getOrderByUID().then(res=>{
                    this.tableData.push(res.data)
                
                })},
              
    closePopup() {
      this.popupVisible = false;
    },
            showRoomDetail(room){
                this.popupVisible = true;
                
                getRoomByRoomID(room.room_id).then(resp=>{
                    
                    this.chosenRoom=resp.data;
                   
                })
                
            }}

            
          
           
               
                    // alert("id:"+room.room_id)
                  
                  
            
        }
      
  </script>

  <style>
.orderList{
    justify-content: center;
}
</style>